<template>
  <view class="customer-card">
    <view class="card-row row-between">
      <view class="card-row">
        <view class="value">
          <image class="image-avatar" :src="dataInfo.headimg"
                 mode="aspectFill" @tap="headimgPreview"/>
        </view>
        <view class="nickname-type">
          <view class="card-row">
            <view class="label">昵称：</view>
            <view class="value">{{ dataInfo.nickname }}</view>
          </view>
          <view class="card-row">
            <view class="label">类型：</view>
            <view class="value">{{ dataInfo.user_type?.name }}</view>
          </view>
        </view>
      </view>
      <view class="card-row">
        <up-button v-if="dataInfo.type_phone===1" type="primary" size="mini" @tap.stop="getPhonHandler">获取手机号</up-button>
        <up-button v-if="dataInfo.type_phone===2" type="success" size="mini" @tap.stop="getPhone">查看手机号</up-button>
      </view>
    </view>


    <view class="card-row" v-if="false">
      <view class="label">地址：</view>
      <view class="value">{{ dataInfo.province }}{{ dataInfo.city }}{{ dataInfo.district }}{{
          dataInfo.address
        }}
      </view>
    </view>
    <view v-if="lifePhotos.length>0" class="grid-images">
      <image v-for="(item,index) in lifePhotos" :key="index"
             class="grid-item" :src="item" mode="aspectFill"
             @tap.stop="previewImage(index)"/>
    </view>
    <up-gap height="12rpx" />
    <view class="card-row">
      <view class="label">特长：</view>
      <view class="value">{{ dataInfo.specialty }}</view>
    </view>
    <view class="card-row row-between">
      <view></view>
      <view class="card-row">
        <view class="label"></view>
        <view class="value">{{ getMiShu() }}km</view>
      </view>
    </view>

  </view>
</template>
<script setup>
const props = defineProps({
  dataInfo: {
    type: Object,
    default: () => {
    }
  },
  pid: {
    type: String,
    default: ''
  }
})

const lifePhotos = computed(() => {
  if (!props.dataInfo.lifePhotos) {
    return []
  }
  return props.dataInfo.lifePhotos?.split(',')
})


const getPhonHandler = async () => {
  const res = await qly.dialog.messageBox({
    title: '提示',
    message: `是否花费${props.dataInfo.user_type.zs}钻石查看手机号`,
  })
  console.log(res)
  if (res) {
    getPhone()
  }
}

const getPhone = async () => {
  const res = await qly.api.user.consumption({pid: props.pid})
  if (res.code === 0) {
    qly.dialog.message({
      title: '手机号',
      message: res.data,
    })
  } else {
    qly.dialog.apiError(res).catch()
  }
}

const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: lifePhotos.value,
  });
}

const headimgPreview = (index) => {
  uni.previewImage({
    current: 0,
    urls: [props.dataInfo.headimg],
  });
}

// 获取米数
const getMiShu=()=>{
  return props.dataInfo.mishu.toFixed(2)
}
</script>
<style scoped lang="scss">

.customer-card {
  margin: 24rpx 24rpx;
  background: #fff;
  padding: 24rpx;
  border-radius: 12rpx;

  .card-row {
    display: flex;
    align-items: flex-start;
    line-height: 56rpx;

    .label {
      color: #606266;
    }

    .value {
      flex: 1;
    }
  }

  .row-between {
    justify-content: space-between;
  }

  .row-center {
    justify-content: center;
  }
}

.image-avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 12rpx;
  background-color: #c0c4cc;
}

.grid-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12rpx;
  margin-top: 12rpx;

  .grid-item {
    width: 100%;
    height: 200rpx;
    border-radius: 12rpx;
  }
}
.nickname-type{
  margin-left: 12rpx;
}
</style>